<template>
	<view class="container">
		<!-- 添加顶部装饰背景 -->
		<view class="page-header">
			<view class="header-content">
				<text class="header-title">动态广场</text>
				<text class="header-desc">发现精彩瞬间</text>
			</view>
			<view class="header-wave"></view>
		</view>

		<!-- 赛事列表 -->
		<view class="match-list">
			<!-- 赛事卡片 -->
			<view class="match-card" @tap="toggleExpand(match)" v-for="match in matches" :key="match.id">
				<view class="header">
					<view class="profile">
						<image class="avatar" :src="match.avator"></image>
						<view class="info">
							<text class="name">{{ match.title }}</text>
							<text class="time">{{ match.postDate }} {{ match.userName }}</text>
						</view>
					</view>
				</view>

				<view class="match-content">
					<view class="title-wrapper">
						<text class="match-title" :class="{ 'text-ellipsis': !match.isExpanded }">
							{{ match.content }}
						</text>
						<text class="expand-btn" @tap="toggleExpand(match)">
							{{ match.isExpanded ? "收起" : "【查看更多】" }}
						</text>
					</view>
					<view class="match-banner" v-if="match.videoUrl">
						<video class="video-player" :src="match.videoUrl" object-fit="cover" show-play-btn controls></video>
					</view>

					<view class="match-stats">
						<view class="views">
							<uni-icons type="eye" size="28rpx" color="#666"></uni-icons>
							<text>{{ match.views }}</text>
						</view>
						<view class="actions" style="display: flex;">
							<view class="comment">
								<uni-icons type="chat" size="28rpx" color="#3db657"></uni-icons>
								<text>{{ match.commentsLength || 0 }}</text>
							</view>
							<view class="like">
								<uni-icons type="heart" size="28rpx" color="#3db657"></uni-icons>
								<text>{{ match.likes || 0 }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getDiscussionList } from "@/api/system/index";
import config from "@/config";
export default {
	data() {
		return {
			matches: []
		};
	},
	onShow() {
		this.getDiscussionList();
	},
	methods: {
		async getDiscussionList() {
			const res = await getDiscussionList({
				pageNum: 1,
				pageSize: 1000
			});
			this.matches = res.data.records.map((item) => ({
				...item,
				commentsLength: (item.comments && item.comments.length) || 0,
				isExpanded: false,
				videoUrl1: config.baseUrl + item.videoUrl,
				avator: config.baseUrl + item.avator
			}));
		},
		toggleExpand(match) {
			uni.setStorageSync("match", match);
			uni.navigateTo({
				url: `/pages/dynamicStateDetail/dynamicStateDetail?id=${match.id}`
			});
		}
	}
};
</script>

<style>
.container {
	padding: 0;
	background: #f8f9fa;
	min-height: 100vh;
}

.page-header {
	position: relative;
	height: 300rpx;
	background: linear-gradient(120deg, #3db657, #2d8e42);
	padding: 40rpx 30rpx;
	color: #fff;
	overflow: hidden;
}

.page-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 20%), radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.08) 0%, transparent 20%);
}

.header-content {
	position: relative;
	z-index: 2;
}

.header-title {
	font-size: 48rpx;
	font-weight: bold;
	margin-bottom: 16rpx;
	display: block;
}

.header-desc {
	font-size: 28rpx;
	opacity: 0.9;
}

.header-wave {
	position: absolute;
	bottom: -2rpx;
	left: 0;
	width: 100%;
	height: 40rpx;
	background: url('data:image/svg+xml,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23f8f9fa"/></svg>');
	background-size: cover;
	transform: rotate(180deg);
}

.match-list {
	padding: 20rpx 30rpx;
	margin-top: -40rpx;
	position: relative;
	z-index: 3;
}

.match-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	transform: translateY(0);
	transition: all 0.3s ease;
}

.match-card:active {
	transform: translateY(2rpx);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.profile {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.avatar {
	width: 88rpx;
	height: 88rpx;
	border-radius: 44rpx;
	border: 4rpx solid #fff;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.info {
	display: flex;
	flex-direction: column;
}

.name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.time {
	font-size: 24rpx;
	color: #999;
	margin-top: 4rpx;
}

.follow-btn {
	background: #3db657;
	color: #fff;
	font-size: 28rpx;
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
	border: none;
}

.match-content {
	width: 100%;
}

.title-wrapper {
	position: relative;
	margin-bottom: 16rpx;
}

.match-title {
	font-size: 32rpx;
	color: #333;
	line-height: 1.4;
}

.text-ellipsis {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.expand-btn {
	color: #3db657;
	font-size: 28rpx;
	padding: 10rpx 0;
	/* display: inline-block; */
	float: right;
	margin-top: 10rpx;
}

.match-banner {
	position: relative;
	width: 100%;
	border-radius: 12rpx;
	overflow: hidden;
	margin: 16rpx 0;
}

.video-player {
	width: 100%;
	height: 400rpx;
	border-radius: 12rpx;
}

.status {
	position: absolute;
	right: 20rpx;
	bottom: 20rpx;
	background: rgba(61, 182, 87, 0.9);
	color: #fff;
	padding: 6rpx 20rpx;
	border-radius: 6rpx;
	font-size: 24rpx;
}

.match-stats {
	margin-top: 24rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid rgba(0, 0, 0, 0.06);
	display: flex;
	justify-content: space-between;
}

.views,
.comment,
.like {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 8rpx 12rpx;
	border-radius: 30rpx;
	transition: all 0.3s ease;
}

.views:active,
.comment:active,
.like:active {
	background: rgba(61, 182, 87, 0.1);
}

/* 调整图标与文字的对齐方式 */
.uni-icons {
	display: flex;
	align-items: center;
}
</style>
